<script setup>
const props = defineProps({
  devices: {
    type: Array,
    required: true
  }
})
</script>

<template>
  
  <dv-border-box-6 class="dashboard-panel" title='设备运行状态'>
    <div class="panel-header" >
      <i class="el-icon-cpu"></i>
      设备运行状态
    </div>
    <div class="data-table">
      <el-table :data="devices" style="width: 100%" size="small">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="name" label="设备名称" />
        <el-table-column prop="status" label="运行状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === '运行中' ? 'success' : 
                        scope.row.status === '待机' ? 'info' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="runtime" label="运行时间(h)" />
        <el-table-column prop="efficiency" label="效率" />
        <el-table-column prop="power" label="功率(kw)" />
      </el-table>
    </div>
  </dv-border-box-6>
</template>

<style scoped>
/* 面板样式 */
.dashboard-panel {
  position: relative;
  min-height: 300px; /* 设置最小高度 */
  height: 100%; /* 使用100%高度以适应父容器 */
  flex: 0 0 auto; /* 禁止收缩 */
  overflow: visible !important; /* 允许内容超出 */
  width: 100% !important;
  
}

/* 表格样式 */
.data-table {
  max-height: 400px !important; /* 设置最大高度 */
  height: calc(100% - 40px) !important; /* 减去头部高度 */
  overflow-y: auto !important; /* 启用垂直滚动 */
  padding: 0 10px;
  scrollbar-width: thin;
  scrollbar-color: #3a7eff #001a33;
  width: 100% !important;
}

/* 确保表格不会溢出容器 */
:deep(.el-table) {
  height: 100% !important;
  max-height: 100% !important;
  background-color: transparent !important;
  el-table-header-bg-color: rgba(10, 49, 97, 0.5) !important;
  el-table-tr-bg-color: transparent !important;
  el-table-border-color: #0a3161 !important;
  el-table-text-color: #fff !important;
  el-table-header-text-color: #29b6ff !important;
  el-table-row-hover-bg-color: rgba(10, 49, 97, 0.3) !important;
}

:deep(.el-table__body-wrapper) {
  overflow-y: auto !important;
  max-height: calc(100% - 40px) !important; /* 减去表头高度 */
}

/* 适配WebKit浏览器的滚动条样式 */
.data-table::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.data-table::-webkit-scrollbar-track {
  background: rgba(0, 26, 51, 0.5);
  border-radius: 4px;
}

.data-table::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #3a7eff, #00eaff);
  border-radius: 4px;
  border: 2px solid rgba(0, 26, 51, 0.5);
}

.data-table::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #599bff, #6df1ff);
}

:deep(.el-table--small) {
  font-size: 11px;
}

:deep(.el-table th), :deep(.el-table td) {
  padding: 4px 0;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: rgba(10, 49, 97, 0.3) !important;
}

:deep(.el-table .el-table__cell) {
  background-color: transparent !important;
}

:deep(.el-table tr) {
  background-color: transparent !important;
}

:deep(.el-table tr:nth-child(even)) {
  background-color: rgba(0, 26, 51, 0.5) !important;
}

:deep(.el-empty) {
  --el-empty-fill-color: rgba(255, 255, 255, 0.1);
  --el-empty-font-size: 12px;
  --el-empty-icon-size: 50px;
  color: #ccc;
  padding: 10px 0;
}

/* 美化表格内滚动条 */
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 8px;
  height: 8px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background: rgba(0, 26, 51, 0.5);
  border-radius: 4px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background: linear-gradient(to bottom, #3a7eff, #00eaff);
  border-radius: 4px;
  border: 2px solid rgba(0, 26, 51, 0.5);
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
  background: linear-gradient(to bottom, #599bff, #6df1ff);
}
</style> 